import Vue from 'vue';
import addUser from './addUserDialog.vue';
import addAgency from './addAgencyDialog.vue';
import expensesDetail from './expensesDetailDialog.vue';
import addOrder from './addOrderDialog.vue';
import addStudent from './addStudentDialog.vue';
import addRecord from './addRecordDialog.vue';
import recordDetail from './recordDetailDialog.vue';
import addInstitution from './addInstitutionDialog.vue';
import addMarketActivities from './addMarketActivityDialog.vue';

import store from '../../store';

export var Dialog = {
    methods: {
        handleSelModal(el_name, payload) {
            switch (el_name) {
                case 'add-user':
                    initVue({
                        el_name,
                        payload,
                        component: addUser
                    });
                    break;
                case 'add-agency':
                    initVue({
                        el_name,
                        payload,
                        component: addAgency
                    });
                    break;
                case 'expenses-detail':
                    initVue({
                        el_name,
                        payload,
                        component: expensesDetail
                    });
                    break;
                case 'add-order':
                    initVue({
                        el_name,
                        payload,
                        component: addOrder
                    });
                    break;
                case 'add-record':
                    initVue({
                        el_name,
                        payload,
                        component: addRecord
                    });
                    break;
                case 'add-student':
                    initVue({
                        el_name,
                        payload,
                        component: addStudent
                    });
                    break;
                case 'record-detail':
                    initVue({
                        el_name,
                        payload,
                        component: recordDetail
                    });
                    break;
                case 'add-institution':
                    initVue({
                        el_name,
                        payload,
                        component: addInstitution
                    });
                    break;
                case 'add-market-activities':
                    initVue({
                        el_name,
                        payload,
                        component: addMarketActivities
                    });
                    break;
            }
        }
    }
}

function initVue({
    el_name,
    payload,
    component
}) {
    // element = (function(){
    //   var ele;
    //   return function(){
    //     if(!ele){
    //
    //     }
    //   }
    // })()
    var element = document.createElement('div');
    element.id = `${el_name}-container`;
    element.innerHTML = `<${el_name}-dialog :remove='removeNodeName' :payload='childPayload'></${el_name}-dialog>`;
    document.getElementById('app').appendChild(element);

    Vue.component(`${el_name}-dialog`, component);
    new Vue({
        data: {
            removeNodeName: element.id,
            childPayload: payload
        },
        store
    }).$mount(element);
}
